<template>
  <section class="page-container">
    <el-maia-card title="表单填写内容平铺">
      <el-form
        ref="basicFormRef"
        class="form-part1 normal mt-12"
        :label-width="100"
        :model="basicForm"
        :rules="formRules"
      >
        <el-form-item
          prop="title"
          label="标题"
        >
          <el-input
            v-model="basicForm.title"
            placeholder="请输入标题"
            clearable
            maxlength="30"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          prop="targetDes"
          label="目标描述"
        >
          <el-input
            v-model="basicForm.targetDes"
            type="textarea"
            :autosize="{
              minRows: 3,
              maxRows: 6,
            }"
            maxlength="300"
            show-word-limit
            placeholder="请输入目标描述"
          />
        </el-form-item>
        <el-form-item
          label="只读信息"
        >
          <section class="el-input">
            <span>donymh@163.com</span>
          </section>
        </el-form-item>
        <el-form-item required>
          <template #label>
            <section class="custom-label">
              <span>协议</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="Top Center 提示文字"
                placement="top"
              >
                <el-icon class="tip">
                  <info-filled />
                </el-icon>
              </el-tooltip>
            </section>
          </template>
          <el-input
            value="https"
            placeholder="请输入标题"
            clearable
            disabled
          />
        </el-form-item>
        <el-form-item
          prop="optionsType"
          label="选择用户类型"
        >
          <el-radio-group v-model="basicForm.optionsType">
            <el-radio
              v-for="item of optionsTypeList"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="optionsType"
          label="选择用户类型"
        >
          <el-radio-group v-model="basicForm.optionsType">
            <el-radio-button
              v-for="item of optionsTypeList"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="optionsType"
          label="选择用户类型"
        >
          <el-radio-group v-model="basicForm.optionsType">
            <el-radio
              v-for="item of optionsTypeList"
              :key="item.value"
              :value="item.value"
              border
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="weekdays"
          label="选择星期"
        >
          <el-checkbox-group v-model="basicForm.weekdays">
            <el-checkbox
              v-for="(item, index) of weekdays"
              :key="index"
              :value="index"
              :disabled="index===2"
            >
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          prop="weekdays"
          label="选择星期2"
        >
          <el-checkbox-group v-model="basicForm.weekdays">
            <el-checkbox-button
              v-for="(item, index) of weekdays"
              :key="index"
              :value="index"
              :disabled="index===2"
            >
              {{ item }}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          prop="dateVal"
          label="起止日期"
        >
          <el-date-picker
            v-model="basicForm.dateVal"
            type="daterange"
            placeholder="选择日期"
            start-placeholder="请选择开始日期"
            end-placeholder="请选择结束日期"
          />
        </el-form-item>
        <el-form-item
          prop="dateVal"
          label="选择城市"
        >
          <el-checkbox-group
            v-model="checkboxGroup1"
            disabled
          >
            <el-checkbox-button
              v-for="city in cities"
              :key="city"
              :value="city"
            >
              {{ city }}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          prop="matchModel"
          label="匹配模式"
        >
          <el-select
            v-model="basicForm.matchModel"
            placeholder="请选择匹配模式"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="item in modelList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="匹配模式1"
        >
          <el-select
            v-model="value"
            placeholder="Select"
            style="width: 240px;"
            clearable
            filterable
          >
            <el-option-group
              v-for="group in selectGroupOptions"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-option-group>
          </el-select>
        </el-form-item>

        <el-form-item
          prop="standard"
          label="衡量标准"
        >
          <el-input
            v-model="basicForm.standard"
            placeholder="请输入衡量标准"
            clearable
          />
        </el-form-item>
        <el-form-item
          prop="customer"
          label="客户"
        >
          <el-input
            v-model="basicForm.customer"
            placeholder="请输入客户"
            clearable
          />
        </el-form-item>
        <el-form-item
          prop="inVisitCom"
          label="邀评人"
        >
          <el-input
            v-model="basicForm.inVisitCom"
            placeholder="请输入邀评人"
            clearable
          />
        </el-form-item>
        <el-form-item
          prop="inVisitCom"
          label="邀评人"
        >
          <el-rate v-model="rateVal" />
        </el-form-item>
        <el-form-item
          prop="weights"
          label="权重"
        >
          <el-input-number
            v-model="basicForm.weights"
            placeholder="请输入权重"
            clearable
          />
        </el-form-item>
      </el-form>
    </el-maia-card>
  </section>
</template>
<script lang="ts" setup name="basic-form">
import { ref } from 'vue';

import { InfoFilled } from '@element-plus/icons-vue';

const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
const checkboxGroup1 = ref(['Shanghai']);

const basicFormRef = ref();

const modelList = ref([
  {
    id: 1,
    label: '自定义',
    value: 1,
  },
  {
    id: 2,
    label: '模式1',
    value: 2,
  },
  {
    id: 3,
    label: '模式2',
    value: 3,
  }
]);

const optionsTypeList = ref([
  {
    id: 1,
    label: '所有人',
    value: 1,
    disabled: true,
  },
  {
    id: 2,
    label: '仅自己',
    value: 2,
    disabled: true,
  }
]);
const weekdays = ref(['周日', '周一', '周二', '周三', '周四', '周五', '周六']);
const basicForm = ref({
  title: '',
  dateVal: [],
  targetDes: '',
  standard: '',
  customer: '',
  inVisitCom: '',
  weights: 1,
  matchModel: [],
  optionsType: 1, // 1：所有人 2：尽自己
  weekdays: [0, 1],
});

const formRules = ref({
  matchModel: [
    {
      required: true,
      message: '请选择匹配模式',
      trigger: 'change',
    }
  ],
  title: [
    {
      required: true,
      message: '请输入标题',
      trigger: 'blur',
    }
  ],
  dateVal: [
    {
      required: true,
      message: '请选择起止日期',
      trigger: 'blur',
    }
  ],
  targetDes: [
    {
      required: true,
      message: '请输入目标描述',
      trigger: 'blur',
    }
  ],
  standard: [
    {
      required: true,
      message: '请输入横联标准',
      trigger: 'blur',
    }
  ],
  optionsType: [
    {
      required: true,
      message: '请选择用户类型',
      trigger: 'change',
    }
  ],
  weekdays: [
    {
      required: true,
      message: '请选择星期天',
      trigger: 'change',
    }
  ],
});

const value = ref('');
const selectGroupOptions = ref([
  {
    label: 'Popular cities',
    options: [
      {
        value: 'Shanghai',
        label: 'Shanghai',
      },
      {
        value: 'Beijing',
        label: 'Beijing',
      }
    ],
  },
  {
    label: 'City name',
    options: [
      {
        value: 'Chengdu',
        label: 'Chengdu',
      },
      {
        value: 'Shenzhen',
        label: 'Shenzhen',
      },
      {
        value: 'Guangzhou',
        label: 'Guangzhou',
      },
      {
        value: 'Dalian',
        label: 'Dalian',
      }
    ],
  }
]);
const rateVal = ref(0);
</script>
<style lang="scss" scoped>
.mt-12 {
  margin-top: 12px;
}

.custom-label {
  display: flex;
  align-items: center;

  .#{$namespace}-icon {
    cursor: pointer;

    &.tip {
      margin-left: 2px;
      font-size: 12px;
    }
  }
}

.page-container {
  position: relative;
  height: 100%;
  overflow-y: auto;

  .form-part1 {
    padding: 0 7.4%;
  }
}
</style>
